<template>
  <div class="waper_page" style="padding: 20px;">
    <div class="aside2List">
      <div class="asideLeft">
        <AsideBox :asideList="asideList" :itemAside="itemAside" @handleAside="handleAside"></AsideBox>

      </div>
      <div class="aside2Left">
        <Aside2Box :aside2List="aside2List" :item2Aside="item2Aside" @handle2Aside="handle2Aside"></Aside2Box>
      </div>
      <div class="listRight">
        <ListBox :dataList="dataList" :className="className" :itemList="itemList" @handleGoto="handleGoto"></ListBox>
      </div>
    </div>
  </div>
</template>

<script>
import AsideBox from '@/components/Widgets/asideBox'
import Aside2Box from '@/components/Widgets/aside2Box'
import ListBox from '@/components/Widgets/listBox'
export default {
  components: { AsideBox, Aside2Box, ListBox },
  props: {},
  data() {
    return {
      // 侧边栏数据
      asideList: [],
      itemAside: {},
      // 二级侧边栏
      aside2List: [],
      item2Aside: {},
      // 列表数据
      dataList: [],
      itemList: {},
      className: 'listImg4',// 6列：listImg6 5列：listImg5 4列：listImg4
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.getAsideList();
    this.getAside2List();
  },
  updated() { },
  methods: {
    // 获取侧边栏数据
    getAsideList() {
      this.asideList = [
        { title: '电影', code: '111', },
        { title: '电视剧', code: '112', },
        { title: '综艺', code: '113', },
        { title: '纪录片', code: '114', },
        { title: '动漫', code: '115', },
      ]

      this.itemAside = this.asideList.length > 0 ? this.asideList[0] : {};
      this.getListData();
    },
    // 获取二级侧边栏的数据
    getAside2List() {
      let data = [
        {
          title: '电影', pcode: '111',
          subData: [
            { title: '喜剧', code: '1110' },
            { title: '科幻', code: '1111' },
            { title: '动作', code: '1112' },
          ]
        },
        {
          title: '电视剧', pcode: '112',
          subData: [
            { title: '军事', code: '1121' },
            { title: '爱情', code: '1122' },
            { title: '动画', code: '1123' },
          ]
        },
        {
          title: '综艺', pcode: '113',
          subData: [
            { title: '真人秀', code: '1131' },
            { title: '脱口秀', code: '1132' },
            { title: '搞笑', code: '1133' },
          ]
        },
        {
          title: '纪录片', pcode: '114',
          subData: [
            { title: '自然', code: '1141' },
            { title: '人物', code: '1142' },
            { title: '科技', code: '1143' },
            { title: '美食', code: '1144' },
            { title: '历史', code: '1145' },
          ]
        },
        {
          title: '动漫', pcode: '115',
          subData: [
            { title: '国漫', code: '1151' },
            { title: '冒险', code: '1152' },
            { title: '搞笑', code: '1153' },
            { title: '热血', code: '1154' },
            { title: '魔幻', code: '1155' },
          ]
        },
      ]
      data.forEach(item => {
        if (this.itemAside.code == item.pcode) {
          this.aside2List = item.subData;
        }
      })
      this.item2Aside = this.aside2List.length > 0 ? this.aside2List[0] : {};
      this.getListData();
    },
    // 获取列表数据
    getListData() {
      let listData = [
        {
          asideTitle: '电影', asideCode: '111',
          aside2Title: '喜剧', aside2Code: '1110',
          data: [
            { title: '哥，你好', code: '111011', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '平凡英雄', code: '111012', imgUrl: require('@/assets/img/r-2.jpg') },
            { title: '独行月球', code: '111013', imgUrl: require('@/assets/img/r-3.jpg') },
            { title: '阴阳画皮年少好滴哦好等哈搜狐都爱', code: '111014', imgUrl: require('@/assets/img/r-4.jpg') },
            { title: '一周的朋友', code: '111015', imgUrl: require('@/assets/img/r-5.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
          ]
        },
        {
          asideTitle: '电视剧', asideCode: '112',
          aside2Title: '爱情', aside2Code: '1122',
          data: [
            { title: '爱的二八定律', code: '111111', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '我们的当打之年', code: '111112', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '你是我的荣耀', code: '111113', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '谢谢你医生', code: '111114', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '良辰美景好时光', code: '111115', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '陈情令', code: '111116', imgUrl: require('@/assets/img/r-1.jpg') },
          ]
        },
        {
          asideTitle: '综艺', asideCode: '113',
          aside2Title: '脱口秀', aside2Code: '1132',
          data: []
        },
        {
          asideTitle: '纪录片', asideCode: '114',
          aside2Title: '科技', aside2Code: '1143',
          data: [
            { title: '哥，你好', code: '111011', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '平凡英雄', code: '111012', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '独行月球', code: '111013', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '阴阳画皮', code: '111014', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '一周的朋友', code: '111015', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-1.jpg') },
          ]
        },
        {
          asideTitle: '动漫', asideCode: '115',
          aside2Title: '国漫', aside2Code: '1151',
          data: [
            { title: '喜剧', code: '1210', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '科幻', code: '1211', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '动作', code: '1212', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '爱情', code: '1213', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '动画', code: '1214', imgUrl: require('@/assets/img/r-1.jpg') },
          ]
        },
        {
          asideTitle: '电影', asideCode: '111',
          aside2Title: '动作', aside2Code: '1112',
          data: [
            { title: '军旅抗战', code: '1310', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '古装历史', code: '1311', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '都市是生活', code: '1312', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '偶像爱情', code: '1313', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '青春校园', code: '1314', imgUrl: require('@/assets/img/r-1.jpg') },
          ]
        },
      ]

      let filter = (condition, data) => {
        return data.filter(item => {
          return Object.keys(condition).every(key => {
            return String(item[key]).toLowerCase().includes(String(condition[key]).trim().toLowerCase());
          })
        })
      }

      if (JSON.stringify(this.item2Aside) != '{}') {
        let data = filter({ asideCode: this.itemAside.code, aside2Code: this.item2Aside.code }, listData);
        this.dataList = data.length > 0 ? data[0].data : [];
      } else {
        this.dataList = [];
      }

      this.itemList = this.dataList.length > 0 ? this.dataList[0] : {};
    },
    // 切换侧边栏分类
    handleAside(item) {
      console.log(item);
      this.itemAside = item;
      this.getAside2List();
    },
    // 二级侧边栏切换
    handle2Aside(item) {
      console.log(item);
      this.item2Aside = item;
      this.getListData();
    },
    // 跳转
    handleGoto(data) {
      console.log(data);
      this.itemList = data;
    }
  },
  filters: {},
}
</script>

<style lang="scss" scoped>
.aside2List {
  width: 1280px;
  height: 720px;
  background: url('../../assets/images/bg1.png');
  padding: 20px;
  display: flex;
  flex-direction: row;

  .asideLeft {
    width: 125px;
    height: 100%;
  }

  .aside2Left {
    width: 135px;
    height: 100%;
  }

  .listRight {
    width: calc(100% - 260px);
    height: 100%;
  }
}
</style>
